<template>
  <div class="layout">
    <template v-if="$route.name === 'Login'">
      <RouterView />
    </template>
    <template v-else>
      <header class="layout-header">
        <div class="layout-header__left"></div>
        <div class="layout-header__right">
          <div class="right-links">
            <router-link
              v-for="(item, index) in menus"
              :key="index"
              :to="item.path"
              :class="($route.meta.active === item.path || $route.path === item.path) ? 'active' : ''">
              {{ item.label }}
            </router-link>
          </div>
          <!-- <user-avatar :avatar="'https://pic1.zhimg.com/v2-dcc37fe9c0304c762bc433084c7dac4d.jpg?source=84850838'" :name="'演示用户'" /> -->
          <div class="logout">
            <span @click="logout">退出</span>
          </div>
        </div>
      </header>
      <div class="layout-main">
        <RouterView />
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import UserAvatar from '@/components/user-avatar.vue';
import { token_alia } from '@/global.config';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const menus = ref([
  { path: '/home', label: '首页' },
  { path: '/question', label: '问题管理' },
  { path: '/author', label: '题主管理' },
  { path: '/answer', label: '答主管理' }
])

function logout () {
  localStorage.removeItem(token_alia)
  router.push('login')
}
</script>
<style lang="scss">

$green: #42b883;
.layout {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  &-header {
    flex-shrink: 0;
    height: 60px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    &__right {
      height: 100%;
      display: flex;
      .right-links {
        display: flex;
        gap: 20px;
        height: 100%;
        margin-right: 10px;
      }
      a {
        height: 100%;
        text-decoration: none;
        color: #333;
        display: flex;
        font-size: 1rem;
        align-items: center;
        animation: all .3s;
        transition: all .3s;
        &.active {
          color: $green;
          position: relative;
          &::after {
            content: "";
            width: 100%;
            height: 4px;
            background: $green;
            position: absolute;
            bottom: 0;
            left: 0;
            border-radius: 2px;
          }
        }
        &:hover {
          color: $green;
        }
      }
      .logout {
        display: flex;
        align-items: center;
        span {
          padding: 3px 8px;
          font-size: 14px;
          background: #cdcdcd;
          color: #000;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 5px;
          cursor: pointer;
        }
      }
    }
  }
  &-main {
    flex: 1;
    overflow: hidden;
    padding: 20px;
    position: relative;
  }
}
</style>